<template>
    <Banner />
    <div class="content_main">
        <!-- <GameRecom />
        <div v-if="lang == 'zh'">
            <Reservation />
            <div class="list-wrap">
                <FeedList />
                <Rank />
            </div>
        </div> -->
        <div class="main_left">
            <!-- 热门活动 -->
            <Rank/> 
            <!-- 沙雕动画 -->
            <Sand v-if="lang == 'zh'"/> 
            <hr>
            <!-- 开服公告 -->
            <ServiceOpenAnnouncement/>
            <hr>
            <!-- 独家虛寶 -->
            <HomeGift/>
        </div>
        <div class="main_right">
            <!-- 精品推荐 -->
            <GameRecom91 v-if="lang == 'zh'"/>
            <hr v-if="lang == 'zh' && gameNewOnlineList.length > 0">
            <!-- 新游推荐 -->
           <Reservation91 v-if="lang == 'zh' && gameNewOnlineList.length > 0" :gameNewOnlineList="gameNewOnlineList" />

            <!-- <hr> -->
             <!-- 0.1专区 -->
<!--            <Discount v-if="lang == 'zh'"/>-->
            <hr v-if="lang == 'zh'">
            <HotList91/>
        </div>
    </div>

    <!-- <div class="qcode" :class="{show:showQcode}">
        <div class="close_qcode" @click="showQcode = false">
            <svg t="1718857122348" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4266" width="32" height="32"><path d="M512 466.944l233.472-233.472a31.744 31.744 0 0 1 45.056 45.056L557.056 512l233.472 233.472a31.744 31.744 0 0 1-45.056 45.056L512 557.056l-233.472 233.472a31.744 31.744 0 0 1-45.056-45.056L466.944 512 233.472 278.528a31.744 31.744 0 0 1 45.056-45.056z" fill="#f58732" p-id="4267"></path></svg>
        </div>
        <img width="150" src="https://cdn.91easyplay.com/public/play/images/qcode.png">
    </div> -->
</template>

<script setup>
    import Banner from "@/components/Banner/index.vue"  //轮播图
    import GameRecom91 from "@/components/GameRecom/index_91.vue"  //精品推荐91
    import Reservation91 from "@/components/Reservation/index_91.vue"  //新游预约91
    import HotList91 from "@/components/Rank/ListHot/index_91.vue"  //热门游戏91
    import Rank from "@/components/Rank/index.vue"  
    import Sand from "@/components/Sand/index.vue"  
    import HomeGift from "@/components/HomeGift/index.vue"  
    import ServiceOpenAnnouncement from "@/components/ServiceOpenAnnouncement/index.vue"  
    import axios from '@/utils/api'
    // import GameRecom from "@/components/GameRecom/index.vue"  //精品推荐
    // import Reservation from "@/components/Reservation/index.vue"  //新游预约
    import Discount from "@/components/Discount/index.vue"  //0.1折专区
    // import FeedList from "@/components/FeedList/index.vue"  

    //判断是否弹出过二维码，没有则弹出，并记录
    // const showQcode = ref(0)
    // const isQcodeLocal = localStorage.getItem('isQcodeLocal')
    // if(!isQcodeLocal){
    //     setTimeout(() => {
    //         showQcode.value = 1
    //         localStorage.setItem('isQcodeLocal', true)
    //     }, 1000)
    // }
    

    const lang = ref('')
    if(localStorage.getItem('lang') == 'en'){
        lang.value = 'en'
    }else{
        lang.value = 'zh'
    }

    const gameNewOnlineList = ref([])
    const getList = async () =>{
        const list = await axios.get('/gameNewOnlineList?limit=99')
        gameNewOnlineList.value = list.data.data
    }
    getList()
</script>

<style lang="less" scoped>
hr{
    background-color: rgb(246, 246, 246);
    border: none;
    height: 10px;
}
.qcode{
    position: fixed;
    bottom: 10%;
    right: 5%;
    transition: all .3s;
    transform: scale(0);
    z-index: 9;
    .close_qcode{
        position: absolute;
        right: -26px;
        top: 0;
        cursor: pointer;
    }
}
.show{
    transform: scale(1);
}
.content_main{
    width: 1200px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 30%);
    .main_left{
        width: 25%;
        margin-left: 0;
        background: white;
    }
    .main_right{
        width: 75%;
        margin-right: 0;
        margin-left: 10px;
        background: white;
    }
}
</style>